<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="top">
				<view class="tops_divs">
					<view :style="{ marginLeft: index == 0 ? '0rpx' : '40rpx' }" @click="navClick(item)"
						:class="navIndex == item.value ? 'top_items_active' : 'top_items'"
						v-for="(item, index) in navList" :key="index">
						{{ item.label }}
					</view>
				</view>
			</view>
			<view class="div">
				<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
					@refresherrefresh="onRefresh" @refresherrestore="onRestore">
					<view class="items" v-for="(item, index) in list" :key="index" @click="toClick(item.productId)">
						<view class="left">
							<image class="image" :src="item.images" alt=""></image>
						</view>
						<view class="right">
							<view class="header">
								<view class="title">{{ item.name }}</view>
								<view class="header_right">
									<view class="price">{{ item.price }}</view>
									<!-- <view class="count">×{{ item.salesQuantity }}</view> -->
								</view>
							</view>
							<view class="bottom">
								<view class="answer">{{ item.model }},{{ item.appearance }},{{ item.type }}</view>
								<view class="date">
									{{ item.status == 0 ? '待付款' :  item.status == 1 ? '待发货' : item.status == 2 ? '待收货' : item.status == 3 ?  '待评价' : '已完成' }}
								</view>
							</view>
						</view>
						<view class="items_bottom">
							<view class="items_bottom_price">
								<!-- 实付:￥{{ item.payPrice }} -->
								{{ item.payTime ? '付款时间: ': item.deliveryTime ? '发货时间: ' : item.receiveTime ? '收货时间: ' : ''  }}
								{{ item.payTime ? item.payTime : item.deliveryTime ? item.deliveryTime : item.receiveTime ? item.receiveTime : '' }}
							</view>
							<view class="items_bottom_right">
								<view class="items_bottom_button blue" @click="pingjia(item.id, item.name)"
									v-if="item.status == 3">立即评价</view>
								<view class="items_bottom_button" v-if="false">查看物流</view>
								<view class="items_bottom_button red" v-if="item.status == 2" @click="shouhuo(item)">
									确认收货</view>
							</view>
						</view>
					</view>
					<view class="zanwu" v-if="list.length == 0">暂无数据</view>
					<u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mallRecordMyList,
		updateMallRecord
	} from '@/api/index.js'
	import config from '@/config/config.js'
	import {
		systemInfo
	} from '../../utils/mixin'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				navList: [{
						label: '所有',
						value: ''
					},
					{
						label: '待付款',
						value: '0'
					},
					{
						label: '待发货',
						value: '1'
					},
					{
						label: '待收货',
						value: '2'
					},
					{
						label: '待评价',
						value: '3'
					},
					{
						label: '已完成',
						value: '4'
					},
				],
				navIndex: '',
				list: [],


				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				status: 'loadmore',
				triggered: false,
				downRefresh: false,
				pageCount: 0,
			}
		},
		onLoad() {
			// 状态栏高度
			this.getSystemInfo();


			uni.$on('templateClick', (userId) => {
				this.queryParams.pageNum = 1
				this.list = []
				this.getcollectList()
			});


			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList('')
		},
		methods: {
			// 评价
			async pingjia(id, name) {
				uni.navigateTo({
					url: "/subpackage3/pinajia/pinajia?id=" + id + '&name=' + name
				})
			},
			async shouhuo(item) {
				const res = await updateMallRecord({
					...item,
					status: 3
				})
				uni.$u.toast("确认收货成功")
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.list = []
				this.getcollectList(item.value)

			},
			async navClick(item) {
				this.navIndex = item.value
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.list = []
				this.getcollectList(item.value)
			},
			async getcollectList(business) {
				const res = await mallRecordMyList({
					status: business,
					...this.queryParams
				})
				this.pageCount = res.total
				res.rows.forEach(element => {
					element.images = config.pic_prefix + element.image
				});
				//停止加载中
				this.triggered = false;
				this.downRefresh = false
				//处理完逻辑停止刷新
				uni.stopPullDownRefresh();
				if (this.list.length >= this.pageCount) {
					this.status = 'nomore';
				} else {
					let arr = [...this.list, ...res.rows]
					this.list = arr
					if (res.rows.length < 10) {
						this.status = 'nomore';
					}
				}
			},

			//触底加载
			lowerBottom() {
				if (this.queryParams.pageNum < this.pageCount) {
					if (!this.downRefresh) {
						this.downRefresh = true
						this.status = 'loading';
						this.queryParams.pageNum += 1
						this.getcollectList(this.navIndex)
					}
				}
			},
			onRefresh() {
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.list = []
				this.getcollectList(this.navIndex)
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},
			toClick(id) {
				uni.navigateTo({
					url: "/subpackage3/shop/productDetail?id=" + id
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		.view {
			width: calc(100% - 60rpx);
			height: calc(100% - 60rpx);
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;
			border-radius: 15rpx;

			.top {
				width: 100%;
				padding-bottom: 20rpx;
				overflow-y: hidden;
				overflow-x: auto;

				.tops_divs {
					display: flex;
					align-items: flex-end;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(179, 173, 173, 0.2);
					width: 150%;

					.top_items {
						font-size: 30rpx;
						color: rgb(179, 173, 173);
						width: 200rpx;
						text-align: center;
					}

					.top_items_active {
						font-size: 34rpx;
						color: #000;
						width: 230rpx;
						text-align: center;
					}
				}

			}

			.div {
				width: 100%;
				height: calc(100% - 80rpx);

				.box_scroll {
					height: 100%;
				}
			}

			.zanwu {
				font-size: 30rpx;
				color: #b3adad;
				text-align: center;
				margin-top: 20px;
			}

			.items {
				width: 100%;
				min-height: 140rpx;
				border-bottom: 1px solid rgba(179, 173, 173, 0.2);
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-top: 20rpx;

				.items_bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22rpx;
					margin-bottom: 15rpx;
					margin-top: 15rpx;

					.items_bottom_price {
						font-size: 30rpx;
					}

					.items_bottom_right {
						display: flex;
						align-items: center;

						.items_bottom_button {
							width: 110rpx;
							height: 35rpx;
							border: 1px solid #b3adad;
							text-align: center;
							line-height: 35rpx;
							margin-left: 10rpx;
							border-radius: 10rpx;
						}

						.blue {
							background-color: rgba(20, 97, 184);
							color: #fff;
						}

						.red {
							background-color: red;
							color: #fff;
							border: none;
						}
					}
				}

				.left {
					width: 90rpx;
					height: 90rpx;

					.image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
				}

				.right {
					width: calc(100% - 110rpx);
					display: flex;
					align-items: center;
					align-content: center;
					flex-wrap: wrap;

					.header {
						width: 100%;
						display: flex;
						align-items: center;

						.title {
							font-size: 30rpx;
							width: 80%;
							display: -webkit-box;
							/* 使用Webkit的弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 设置显示的行数 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
							overflow: hidden;
							/* 隐藏溢出的内容 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.header_right {
							width: 20%;
							text-align: right;
							color: #b3adad;

							.count {
								font-size: 20rpx;
							}
						}

					}

					.bottom {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 20rpx;
						color: rgb(179, 173, 173);
						margin-top: 15rpx;

						.date {
							color: red;
						}
					}
				}

			}

		}
	}
</style>